<script lang="ts" setup>
import http from '@/http';
import { Delete, CirclePlus, EditPen, Pointer } from '@element-plus/icons-vue'
import type { TableInstance } from 'element-plus'
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { ElTree } from 'element-plus'
import type Node from 'element-plus/es/components/tree/src/model/node'
import { tr } from 'element-plus/es/locale';
import { reactive } from 'vue'


//角色名的搜索框的值
const title = ref('')

//表格元素的引用
const multipleTableRef = ref<TableInstance>()
//表格中选中的角色
const multipleSelection = ref([])

//全选/全不选切换
const toggleSelection = (rows, ignoreSelectable?: boolean) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(
        row,
        undefined,
        ignoreSelectable
      )
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}

//复选框发生改变
const handleSelectionChange = (val) => {
  console.log(val)
  multipleSelection.value = val
}

//表格角色的数据
const tableData = ref([])
//挂载完成，获取当前页相关的角色数据
onMounted(() => {
  //调用获取当前页相关角色数据的方法
  getPage()
})

//当前页
let pageNum = ref(1)
//每页条数
let pageSize = ref(6)
//总条数
let total = ref(0)
//获取当前页相关角色数据的方法
function getPage() {
  //参数：当前页号 , 每页条数 , 搜索角色名
  http.get('/operate/getoperates', {
    params: {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      title: title.value
    }
  }).then((res) => {
    console.log('hh' + res)
    tableData.value = res.list
    total.value = res.total
    title.value = ''
  })
}

//当前页发生改变
const handleCurrentChange = (val: number) => {
  pageNum.value = val
  //获取当前页的数据
  getPage()
}
//搜索框发生改变
function selectRole() {
  getPage()
}
//树状控件引用
const treeRef = ref<InstanceType<typeof ElTree>>()
//定义树状节点
interface Tree {
  id: number
  label: string
  children?: Tree[]
}


//删除用户按钮,进行用户删除
const handleDelete = (index: number, row) => {
  console.log(index, row)
  http.get('operate/deleteOperate?operId=' + row.operId)
    .then((res) => {
      //如果删除成功
      if (res == 1) {
        //弹出删除成功提示框
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
        //重新当前页的数据
        getPage()
      } else {
        ElMessage({
          message: '删除失败',
          type: 'error',
        })
      }
    })
}


</script>

<template>
  <!-- 按钮+搜索 -->
  <el-row>
    <el-col :span="18">
      <el-button type="danger" :icon="Delete">批量删除</el-button>
      <el-button type="warning" :icon="Pointer" @click="empty">清空</el-button>
    </el-col>
    <el-col :span="6">
      <el-input v-model="title" @change="selectRole" style="width: 240px" placeholder="请输入系统模块" clearable />
    </el-col>
  </el-row>

  <!-- 字典表格 -->
  <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <!-- 普通列 -->
    <el-table-column label="日志ID" width="120" property="operId" />
    <el-table-column property="title" label="系统模块" />
    <el-table-column property="businessType" label="操作类型" />
    <el-table-column property="requestMethod" label="请求方式" />
    <el-table-column property="operName" label="操作人员" />
    <el-table-column property="operIp" label="主机" />
    <el-table-column property="operLocation" label="操作地点" />
    <el-table-column label="操作状态">
      <template #default="scope">
        <span v-if="scope.row.status == 0">成功</span>
        <span v-else>异常</span>
      </template>
    </el-table-column>
    <el-table-column property="operTime" label="创建时间" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>


  <!-- 分页 -->
  <el-row justify="center">
    <el-col :span="12" :offset="6">
      <el-pagination background layout="prev, pager,next,total" :total="total" :page-size="pageSize"
        v-model:current-page="pageNum" @current-change="handleCurrentChange" />
    </el-col>
  </el-row>
</template>

